import React, { Component } from 'react';
import {
    StyleSheet,
    TouchableOpacity,
    TouchableHighlight,
    TouchableWithoutFeedback,
    ListView,
    ScrollView,
    Navigator,
    Image,
    Alert,
    Text,
    View
} from 'react-native';

const Icon=require('react-native-vector-icons/Ionicons');
var ImagePicker = require('react-native-image-picker');
import Communications from 'react-native-communications';

import Pesonal from './Pesonal';
import About from './About';

export default class Account extends Component {

    constructor(props) {
        super(props);
        const initTx=require('../static/tx/tx2.jpg');
        this.state = {
            txSource:initTx
        };
    }

    showImagePicker=()=>{
        var options = {
            title: '选择照片', // specify null or empty string to remove the title
            cancelButtonTitle: '取消',
            takePhotoButtonTitle: '照相机', // specify null or empty string to remove this button
            chooseFromLibraryButtonTitle: '图库', // specify null or empty string to remove this button
            cameraType: 'back', // 'front' or 'back'
            mediaType: 'photo', // 'photo' or 'video'
            //videoQuality: 'high', // 'low', 'medium', or 'high'
            //maxWidth: 100, // photos only
            //maxHeight: 100, // photos only
            //aspectX: 2, // android only - aspectX:aspectY, the cropping image's ratio of width to height
            //aspectY: 2, // android only - aspectX:aspectY, the cropping image's ratio of width to height
            quality: 1, // 0 to 1, photos only
            //allowsEditing: true,
            noData: false, // photos only - disables the base64 `data` field from being generated (greatly improves performance on large photos)
            storageOptions: { // if this key is provided, the image will get saved in the documents directory on ios, and the pictures directory on android (rather than a temporary directory)
                skipBackup: true, // ios only - image will NOT be backed up to icloud
                path: 'images' // ios only - will save image at /Documents/images rather than the root
            }
        };

        /**
         * The first arg will be the options object for customization, the second is
         * your callback which sends object: response.
         *
         * See the README for info about the response
         */

        ImagePicker.showImagePicker(options, (response) => {
            console.log('Response = ', response);

            if (response.didCancel) {
                console.log('User cancelled image picker');
            }
            else if (response.error) {
                console.log('ImagePicker Error: ', response.error);
            }
            else if (response.customButton) {
                console.log('User tapped custom button: ', response.customButton);
            }
            else {
                // You can display the image using either data:
                const source = {uri: 'data:image/jpeg;base64,' + response.data, isStatic: true};

                this.setState({
                    txSource: source
                });
            }
        });
    }

    render() {
        return (
            <View style={[styles.container]}>
                <View style={styles.nav_container}>
                    <Text style={{fontSize:25}}>账户</Text>
                </View>
                <View style={{height:100,backgroundColor:'green',flexDirection:'row',justifyContent:'space-between',alignItems:'center'}}>
                    <TouchableWithoutFeedback
                        onPress={this.showImagePicker}
                    >
                        <Image source={this.state.txSource} style={{height:90,width:90,backgroundColor:'red',marginLeft:10}} borderRadius={50} />
                    </TouchableWithoutFeedback>
                    <TouchableWithoutFeedback
                        onPress={()=>this.props.navigator.push({
                                sceneConfig: Navigator.SceneConfigs.FloatFromRight,
                                component: Pesonal,
                                params:{
                                    name: 'Page2页面'
                                }
                            })
                        }
                    >
                        <Icon style={[styles.nav_logo,styles.nav_right,{marginRight:20}]} name="ios-arrow-forward" color="#2f4f4f" />
                    </TouchableWithoutFeedback>

                </View>
                <ScrollView style={{backgroundColor:'yellow',flex:1,marginTop:10}}>
                    <View style={{borderBottomWidth:1,height:45,backgroundColor:'pink',flexDirection:'row',justifyContent:'space-between',alignItems:'center'}}>
                        <Text style={{marginLeft:10,fontSize:20}}>账号与安全</Text>
                        <Icon style={{marginRight:20,fontSize:25}} name="ios-arrow-forward" color="#2f4f4f" />
                    </View>
                    <View style={{borderBottomWidth:1,height:45,backgroundColor:'pink',flexDirection:'row',justifyContent:'space-between',alignItems:'center'}}>
                        <Text style={{marginLeft:10,fontSize:20}}>通用</Text>
                        <Icon style={{marginRight:20,fontSize:25}} name="ios-arrow-forward" color="#2f4f4f" />
                    </View>
                    <TouchableWithoutFeedback
                        onPress={()=>this.props.navigator.push({
                                sceneConfig: Navigator.SceneConfigs.FloatFromRight,
                                component: About,
                                params:{
                                    name: '关于我们'
                                }
                            })
                        }
                    >
                        <View style={{borderBottomWidth:1,height:45,backgroundColor:'pink',flexDirection:'row',justifyContent:'space-between',alignItems:'center'}}>
                            <Text style={{marginLeft:10,fontSize:20}}>关于我们</Text>
                            <Icon style={{marginRight:20,fontSize:25}} name="ios-arrow-forward" color="#2f4f4f" />
                        </View>
                    </TouchableWithoutFeedback>
                    <View style={{borderBottomWidth:1,height:45,backgroundColor:'pink',flexDirection:'row',justifyContent:'space-between',alignItems:'center'}}>
                        <Text style={{marginLeft:10,fontSize:20}}>联系我们</Text>
                        <TouchableWithoutFeedback
                            onPress={() => Communications.phonecall('89387465', true)}
                        >
                            <Text style={{marginRight:20,fontSize:25}}>89278376</Text>
                        </TouchableWithoutFeedback>

                    </View>
                    <View style={{borderBottomWidth:1,height:45,backgroundColor:'pink',flexDirection:'row',justifyContent:'space-between',alignItems:'center'}}>
                        <Text style={{marginLeft:10,fontSize:20}}>版本信息</Text>
                        <Icon style={{marginRight:20,fontSize:25}} name="ios-arrow-forward" color="#2f4f4f" />
                    </View>

                </ScrollView>
            </View>

        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    nav_container: {
        flexDirection:'row',
        justifyContent:'center',
        alignItems:'center',
        backgroundColor: '#00bfff',
        height:40
    },
    nav_logo:{
        textAlign:'center',
        fontSize:35,
    },
    nav_left:{
        paddingLeft:10
    },
    nav_right:{
        paddingRight:10
    }


});
